<template>
  <div class="home">
    <div id="main" style="width: 1200px;height:700px;margin:0 auto"></div>
  </div>
</template>

<script>
//引入数据
import mapData from "../utilis/goCoordMap";
//引入地图
import "echarts/map/js/china";
export default {
  name: "Home",
  created() {
    //保存数据
    this.geoCoordMap = mapData.geoCoordMap;
    this.BJData = mapData.BJData;
    this.SHData = mapData.SHData;
    this.GZData = mapData.GZData;
  },
  data() {
    return {
      geoCoordMap: [],
      BJDat: [],
      SHData: [],
      GZData: [],
      };
  },
  mounted() {
    //调用方法
    this.myChars();
  },
  methods: {
    //定义方法
    myChars() {
      const convertData =(data) =>{
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = this.geoCoordMap[dataItem[0].name];
          var toCoord = this.geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord]
            });
          }
        }
        return res;
      };
      const series = [];
      const color= ["#a6c84c", "#ffa022", "#46bee9"];
      const  planePath="path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
      [
        ["北京", this.BJData],
        ["上海", this.SHData],
        ["广州", this.GZData]
      ].forEach((item, i) =>{
        series.push(
          {
            name: item[0] + " Top10",
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "#fff",
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
              }
            },
            data:convertData(item[1])
          },
          {
            name: item[0] + " Top10",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 15
            },
            lineStyle: {
              color: color[i],
              width: 1,
              opacity: 0.6,
              curveness: 0.2
            },
            data: convertData(item[1])
          },
          {
            name: item[0] + " Top10",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              show: true,
              position: "right",
              formatter: "{b}"
            },
            symbolSize: function(val) {
              return val[2] / 8;
            },
            itemStyle: {
              color:color[i]
            },
            data: item[1].map((dataItem)=> {
              return {
                name: dataItem[1].name,
                value: this.geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value
                ])
              };
            })
          }
        );
      });
      var option = {
        backgroundColor: "#404a59",
        title: {
          text: "模拟迁徙",
          subtext: "数据纯属虚构",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["北京 Top10", "上海 Top10", "广州 Top10"],
          textStyle: {
            color: "#fff"
          },
          selectedMode: "single"
        },
        geo: {
          map: "china",
          label: {
            show: false
          },
          roam: true,
          itemStyle: {
            areaColor: "#323c48",
            borderColor: "#404a59"
          },

          emphasis: {
            label: {
              show: true
            },
            itemStyle: {
              areaColor: "#2a333d"
            }
          }
        },
        series
      };
      let myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption(option, true);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
};
</script>
